<template>
  <app-provider>
    <div wh-full f-c-c f-col>
      <system-logo text="128 primary" />
      <div w-56 h-56 my-36>
        <div relative h-full animate-spin>
          <div
            v-for="(item, index) in loadingClasses"
            :key="index"
            absolute
            size="w-16 h-16"
            bg="#fafa"
            rd-8
            animate-pulse
            :class="item"
          ></div>
        </div>
      </div>
      <h2 text="28 bold #646464">{{ appTitle }}</h2>
    </div>
  </app-provider>
</template>

<script lang="tsx" setup>
const appTitle = import.meta.env.VITE_APP_TITLE;
const loadingClasses = [
  "left-0 top-0",
  "left-0 bottom-0 animate-delay-500",
  "right-0 top-0 animate-delay-1000",
  "right-0 bottom-0 animate-delay-1500",
];
</script>

<style scoped></style>
